<template>
	<view class="_tbody">
		<view class="title">
			欢迎使用走访！
		</view>
		<view class="text">
			<text>请填写登录信息</text>
		</view>
		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
			<u-form-item label="" prop="username">
				<u-input v-model="form.username" placeholder="请输入手机号" shape="circle" clearable />
				
			</u-form-item>
			<u-form-item label="" prop="password">
				 <u--input class="input" type="number" placeholder="请输入短信验证码" maxlength='4' 
				      v-model="form.verificationcode" shape="circle" clearable >
				      <template slot="suffix">
				       <u-code class="code" ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
				       <u-button @tap="getCode" :text="tips" size="mini"></u-button>
				      </template>
				     </u--input>
				<!-- <u-input v-model="form.password" placeholder="请输入验证码" type="password" shape="circle" clearable /> -->
			</u-form-item>
		</u--form>
		<u-button @click="submit" shape="circle" class="button">登录</u-button>
		<view class="phonenumber">
			<text @click="click">账号密码登录</text>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
				},
				rules: {
					'username': [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					'password': [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
				},
				tips:''
			}
		},
		  watch: {
		      value(newValue, oldValue) {
		        // console.log('v-model', newValue);
		      }
		    },
		methods: {
			// 跳转到密码登录页
			click(){
				console.log(1)
			uni.navigateTo({
				url: '/pages/login/login'
			});
			},
			// 提交判断
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 获取验证码
			codeChange(text) {
			        this.tips = text;
			      },
			      getCode() {
			        if (this.$refs.uCode.canGetCode) {
			          // 模拟向后端请求验证码
			          uni.showLoading({
			            title: '正在获取验证码'
			          })
			          setTimeout(() => {
			            uni.hideLoading();
			            // 这里此提示会被this.start()方法中的提示覆盖
			            uni.$u.toast('验证码已发送');
			            // 通知验证码组件内部开始倒计时
			            this.$refs.uCode.start();
			          }, 2000);
			        } else {
			          uni.$u.toast('倒计时结束后再发送');
			        }
			      },
			
		}
	}
</script>

<style lang="scss" scoped>
	._tbody {
		margin: 30px;
	}

	.title {
		font-size: 24px;
		margin-top: 80px;
		font-weight: 600;
		color: #333333;
		font-family: 'Source Han Sans CN-Medium';
	}

	.text {
		margin-top: 10px;
		margin-bottom: 60px;
	}

	._b {
		margin-top: 20px;
	}

	.button {
		margin-top: 30px;
		background-color: #0C68FD;
		color: #fff;
	}

	.phonenumber {
		display: block;
		text-align: center;
		margin-top: 10px;
		font-size: 12px;
		color: #666666;
	}
	/deep/.u-button__text{
		color: #0C68FD;
	}
</style>
